<template>
  <div>
  <van-nav-bar title="cart" left-arrow fixed @click-left="onClickLeft"/>
     <div style="height:.88rem"></div>
     <!-- 空状态 -->
     <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="是空的呢"
      v-if="cartList.length<=0"
    />
    <!-- 弹出层里面的商品添加-->
     <van-checkbox-group v-model="result" @change="checkChange" v-if="cartList.length>0">
      <van-row v-for="(item,index) in cartList" :key="index">
        <van-swipe-cell>
          <van-col span="2">
            <van-checkbox :name="item"></van-checkbox>
          </van-col>
          <van-col span="22">
            <van-card
              :origin-price="item.goods.originalPrice"
              :price="item.goods.minPrice"
              :desc="item.guige"
              :title="item.goods.name"
              class="goods-card"
              :thumb="item.goods.pic"
            >
              <template #num>
                <van-stepper v-model="item.num" />
              </template>
            </van-card>
          </van-col>

          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(index)" />
          </template>
        </van-swipe-cell>
      </van-row>
    </van-checkbox-group>
    <!-- 下面的提交栏 -->
    <div class="tijiao">
      <div class="p1">
        <p>
          <input type="checkbox" v-model="checkAll" @click="allGoods" />全选
        </p>
        <p>
          <span>合计：{{totil}}</span>
          <span class="sp1">下单</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: [],
      checkAll: false,
    };
  },
  computed: {
    cartList: function () {
      return this.$store.state.cartStore.cartList;
    },
    totil: function () {
      var n = 0;
      this.result.forEach((item) => {
        n += item.num * item.goods.minPrice;
      });
      return n;
    },
  },
  checkChange() {
    if (this.result.length == this.cartList.length) {
      this.checkAll = true;
    } else {
      this.checkAll = false;
    }
  },
  methods: {
    onClickLeft() {},
    del(index) {
      this.$store.dispatch("DEL", index);
    },
    allGoods() {
      this.checkAll = !this.checkAll;
      if (this.checkAll == true) {
        this.result = this.cartList;
      } else if (this.checkAll == false) {
        this.result = [];
      }
    },
    checkChange() {
      if (this.result.length == this.cartList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
  },
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100px;
}
.tijiao {
  width: 100%;
  height: 1.2rem;
  position: fixed;
  bottom: 1rem;
  border-top: 0.01rem solid #e9e9e9;
  border-bottom: 0.01rem solid #e9e9e9;
}
.p1 {
  width: 100%;
  height: 100%;
  font-size:0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp1 {
  margin-left: 0.3rem;
  display: inline-block;
  width: 1.5rem;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  background-color:red;
  color: #fff;
}
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>